<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/guide.css" />
        <script src="js/jquery-3.3.1.min.js"></script>
          <script src="js/slip.js"></script>
         <script src="js/config.js"></script>
		<title>攻略</title>
	</head>
	<body>
		<div class="box">
			<div class="top">
				<div class="slipping-area">
		            <div class="slipping-imgbox">
		                <img class="banner1" src="./images/daka.png" alt="">
		                <img class="banner1" src="./images/daka.png" alt="">
		                <img class="banner1" src="./images/daka.png" alt="">
		            </div>
		        </div>
			</div>
			
			<div class="content">
				<div class="first">
					<div class="icon">
						<img src="./images/fire.png" alt="" />
					</div>
					
					<div class="first_text">
						<span>
							超人力荐
						</span>
					</div>
				</div>
				
				<div class="itemGrandFather">
					<!--<div class="itemFather">
						<div class="item">
							<div class="left">
							<div class="title">
								<span>9个你一定不知道的信用卡小秘密！</span>
							</div>
							
							<div class="tips">
								<div class="type">
									<div class="type_img">
										<img src="./images/type.png" alt="" />
									</div>
									
									<div class="type_text">
										申卡攻略
									</div>
								</div>
								
								<div class="have_see">
									<div class="eye">
										<img src="./images/eye.png" alt="" />
									</div>
									
									<div class="num">
										3.7k
									</div>
								</div>
							</div>
						</div>
						<div class="right">
							<div class="text_img">
								<img src="./images/daka1.png" alt="" />
							</div>
						</div>
						</div>
					</div>-->
				</div>
			</div>
			
			
			
			
		</div>
		
		
		<script>
			$(function(){
				
				init()
				
				
				//初始化轮播图
			 slip.iniT('.slipping-area', 2000);
			 
			})
			
			
			
			 
			 
			 var windowHeight = $(window).height();//当前窗口的高度             
	               
	         var docHeight = $(document).height(); //当前文档的高度 
			 
			 
			 //滚动加载
			window.onscroll = function(){
				 var scrollTop = $(window).scrollTop();//当前滚动条从上往下滚动的距离     
				console.log("内容实际高度:"+docHeight)
				console.log("滚动条滚动距离:"+scrollTop)
				console.log("窗口可视范围高度:"+windowHeight)
				
				 if(windowHeight + scrollTop >= docHeight - 200){
			 			console.log("已经到达底部了")
			 			init();
				 }
			}
			
			
			 var page = 1;
			 function init(){
			 	$.ajax({
			 		url:"https://www.easy-mock.com/mock/5cb0600ff1fe8418639bfc57/example1/item?cpage="+page,
			 		type:"get",
			 		success:function(res){
			 			console.log(JSON.stringify(res));				
			 			page++;
			 			if(res.success){
			 				var data = res.data;
			 				var length  = data.length;
			 				var oDiv = document.createElement("div");
			 				localStorage.setItem("data",JSON.stringify(data));
			 				
			 				var html="";
			 				for(let i = 0;i < length;i++){
			 					
			 					html+='<div class="item" onclick="toItemContent(\'' + i + '\')">'+
								'<div class="left">'+
								'<div class="title">'+
									'<span>' +data[i].title + '</span>'+
								'</div>'+								
								'<div class="tips">'+
									'<div class="type">'+
										'<div class="type_img">'+
											'<img src="./images/type.png" alt="" />'+
										'</div>'+
										
										'<div class="type_text">'+
											data[i].type +
										'</div>'+
									'</div>'+
									
									'<div class="have_see">'+
										'<div class="eye">'+
											'<img src="./images/eye.png" alt="" />'+
										'</div>'+
										
										'<div class="num">'+
											data[i].see +
										'</div>'+
									'</div>'+
								'</div>'+
							'</div>'+
							'<div class="right">'+
								'<div class="text_img">'+
									'<img src= ' + data[i].img + ' alt="" />'+
								'</div>'+
							'</div>'+
							'</div>';
			 					
			 				}
			 				
			 				oDiv.innerHTML=html;
			 				
				$(".itemGrandFather")[0].appendChild(oDiv);

			 			}
			 		},
			 		error:function(){
			 			console.log("error")
			 		}
			 	})
			 }
			 
			 
			 //跳转详情页
			 
			 function toItemContent(i){
			 	window.location.href="./itemContent.html?i="+i;
			 }
		
			 
		</script>
	</body>
</html>
